<template>
    <h2 class="title">选择寄递类型:</h2>
    <div class="HBox">
        <button :key="9" :class="{Button: true, active: selectedType === 9}" 
        @click="selectType('快包')">快包</button>
        <button :key="81" :class="{Button: true, active: selectedType === 81}" 
        @click="selectType('电商标快')">电商标快</button>
        <button :key="1" :class="{Button: true, active: selectedType === 1}" 
        @click="selectType('特快')">特快</button>
        <button :key="4" :class="{Button: true, active: selectedType === 4}" 
        @click="selectType('其他')">其他</button>
        <button :key="89" :class="{Button: true, active: selectedType === 89}" 
        @click="selectType('标快')">标快</button>
    </div>
    <RegionList :key="regionListKey" :data="data" :type="selectedType" />
</template>

<script>
import { getDataByType } from '@/utils/dataService.js';
import RegionList from './RegionList.vue';

export default {
  components: {
    RegionList
  },
  data() {
    return {
      data: [],
      selectedType: 9,
      regionListKey: 0
    };
  },
  methods: {
    selectType(type) {
      const n_type = {
        '快包': 9,
        '电商标快': 81,
        '特快': 1,
        '其他': 4,
        '标快': 89,
        '即日寄递': 11
      }[type];
      this.selectedType = n_type;
      this.regionListKey += 1;
      this.fetchData(n_type);
    },
    async fetchData(type) {
      try {
        this.data = await getDataByType(type);
      } catch (err) {
        console.error(err);
      }
    }
  },
  created() {
    this.fetchData(this.selectedType);
  }
};
</script>